<template >
  <!-- 顶部 -->
  <div class="header">
    <div class="header-left">
      中部地区
      <van-icon name="arrow" />
    </div>
    <van-search
      v-model="searchValue"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    />
  </div>
<!-- 轮播图 -->
  <van-swipe class="my-swiper" :autoplay="3000" indicator-color="white">
    <van-swipe-item
      v-for="(item,index) in homeData.slides"
      :key="item.id">
      <van-image
        :src="item.pic_image_url"
      />
    </van-swipe-item>
  </van-swipe>
  <!-- 快捷入口 -->
  <van-row justify="space-around">
    <van-col span="11" v-for="(item,index) in homeData.nav2s" :key="item.id" @click="goOrderTwo(index)">
      <van-image
        :src="item.pic_image_url"
      />
    </van-col>
  </van-row>
<!-- 医院列表-栅格布局 -->
 <van-row class="yy-list" v-for="(item,index) in homeData.hospitals" :key="item.id" @click="goOrder(item)">
    <van-col span="6">
      <van-image
        width="90px"
        height="90px"
        :src="item.avatar_url"
      />
    </van-col>
    <van-col span="15" class="yy">
      <div class="yy-name">{{ item.name }}</div>
      <div class="yy-type">
        <span>{{ item.rank }}</span>
        &nbsp;
        <span>{{ item.label }}</span>
      </div>
      <div class="yy-text">{{ item.intro }}</div>
    </van-col>
  
</van-row>
</template>

<script setup>
import { ref,reactive,getCurrentInstance, onMounted} from 'vue';
import {useRouter} from 'vue-router'
 
const router=useRouter()
//获取当前实例
const {proxy}=getCurrentInstance()
const searchValue=ref('')
//首页数据
const homeData=reactive({
  navs:[],
  slides:[],
  hospitals:[],
  nav2s:[]
})

onMounted(async()=>{
  const data=await proxy.$api.getHomeData()
  console.log(data,'data')
  if(data.code===10000){
    Object.assign(homeData,data.data)
    console.log(homeData,'homeData')
  }
})

//快捷入口跳转-订单创建
const goOrderTwo=(index)=>{
  //这里为什么要这样传参,不理解
  router.push(`/createOrder?id=${homeData.hospitals[index].id}`)
}
//点击医院跳转-订单创建
const goOrder=(data)=>{
  router.push(`/createOrder?id=${data.id}`)
}
</script>


<style lang="less" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    margin: 5px;
    line-height: 54px;
    .header-left {
      padding-left: 22px;
      background: url()
        no-repeat left center;
      background-size: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #666666;
    }
  }
  .my-swiper {
    margin: 5px;
  }
  .yy-list {
    padding-bottom: 10px;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
    .yy {
      .yy-name {
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
      }
      .yy-type {
        font-weight: bold;
        line-height: 25px;
        font-size: 15px;
        color: #0ca7ae;
      }
      .yy-text {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  .bottom-text {
    line-height: 50px;
    text-align: center;
    color: #999999;
  }
  
</style>